<template>
	
	<div  class="newrubric">
		<div class="rubric" id="rubric">
			<h3> New Rubric</h3>
			<el-input class="rubric-title" v-model="title" placeholder="Rubric Title"></el-input>
			<div v-for="item in rubric">
				<el-input class="rubric-content" placeholder="Rubric Content" v-model="item.name" v-bind:value="item.name"></el-input>
				<el-input type="number" class="rubric-percent" @change="handleChange" :min="1" :max="100" v-model="item.percent" v-bind:value="item.percent"></el-input>
				<el-button type="danger" class="remove-content" @click="removeSingleContent(item)">Remove</el-button>
			</div>
			<el-button type="info" class="add-content" @click="addContent()">Add</el-button>

			

		</div>
		<hr/>
		<div class="actions">
			 <el-button type="success" @click="addRubric()">Confirm</el-button>
		</div>

		

		

	</div>
</template>

<script>
import axios from 'axios';

	export default{
		name: 'newrubric',
		data(){
			return {
				title:'Course-Assignment-2016',

				rubric:[
					{name:'assignment',percent:20},
					{name:'test',percent:20},
					{name:'project',percent:60}
				]
			}
		},
		methods:{
			calculateTotal(){
				let total = 0;
				if (this.rubric) {
					this.rubric.forEach((element)=>{
						total +=parseInt(element.percent);
					});
				}

				return total;
			},
			removeSingleContent(rubric){
				this.rubric=this.rubric.filter(o=>o.name != rubric.name);
			},
			addContent:function(){
				let canAdd=false;
				let total = this.calculateTotal();
				let score = 0;
				if (total < 100) { 
					score = 100 - total;
					canAdd = true;
				}
				if (canAdd) {
					let temp = 	{name:'New Item',percent:score};
					this.rubric.push(temp);
				}else{
					this.$message({
		  				message:"Oooop！Pecentage is already 100%!",
		  				type:'error',
		  				duration:1500
		  			});
				}

				
			},
			
			addRubric(){
				let total = this.calculateTotal();
				if (total == 100) {
					// axios.post('http://localhost/project/VueRubricAPI/saveRubric.php', {
					// 	title: this.title,
					// 	items: this.rubric
					// })
					// .then(function (response) {
					// 	console.log(response);
					// })
					// .catch(function (error) {
					// 	console.log(error);
					// });
					let temp = this;
					axios({
					    method:'post',
					    url:'http://localhost/project/VueRubricAPI/saveRubric.php',
					    data:{
					        title: this.title,
							items: this.rubric
					    },
					      headers: {
					            'Content-Type': 'application/x-www-form-urlencoded',
					      }
					}).then(function(response){
						console.log(response.data);
						temp.$message({
			  				message:"Add Success!",
			  				type:'info',
			  				duration:1500
				  		});
					    // return response.data;
					}).catch(function (error) {
						console.log(error);
					});
				}else{
					this.$message({
		  				message:"Oooop！Pecentage must be 100%!",
		  				type:'error',
		  				duration:1500
		  			});
				}



			},
			handleChange(value) {
		        console.log(value);
		    }
		}
	}

</script>

<style scope>
.newrubric{
	margin: 10px 10px;
	float: left;
	width: 80%;
}

label{
	clear: both;
	float:left;
	margin: 10px 10px;
}
.rubric-title{
	margin: 10px 10px;
	float: left;
	width: 72%;
}
.rubric-content, .rubric-percent{
	margin: 10px 10px;
	float: left;
	width: 35%;
}
.add-content{
	float:left;
	margin: 10px 10px;
}
.remove-content{
	float:left;
	margin: 10px 10px;
}
.actions{
	clear: both;
	float:left;
	margin: 20px 10px;
}
hr{
	clear: both;
}

</style>